<template>
  <div id="single-marker">
    <slot name="infoWindow"></slot>
  </div>
</template>

<script>
import * as maptalks from "maptalks";
import {Marker, ui} from "maptalks";
import CtMapUtils from '../../api/ctMap'

export default {
  name: 'ctMapMarker',
  components: {},
  props: {
    point: {
      type: Object,
      default: null,
    },
    label: {
      type: Object,
      default: null,
    },
    centerAndZoom: {
      type: Object,
      default: null,
    },
    delAble: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    zIndex: {},
    symbol: {},
    html: {
      type: String,
      default: null
    },
  },
  data: () => ({
    parentMap: null,
    myMarker: null,
    newPoint: null,
    delSymbol: [
      {
        'markerType': 'square',
        'markerFill': 'rgba(0,0,0,0)',
        'markerLineColor': '#eadddd',
        'markerLineWidth': 1,
        'markerWidth': 10,
        'markerHeight': 10,
        'markerDx': 15
      },
      {
        'markerType': 'x',
        'markerFill': 'rgb(135,196,240)',
        'markerFillOpacity': 1,
        'markerLineColor': '#ec4848',
        'markerLineWidth': 2,
        'markerLineOpacity': 1,
        'markerLineDasharray': [],
        'markerWidth': 10,
        'markerHeight': 10,
        'markerDx': 15,
        'markerDy': 0,
        'markerOpacity': 1
      }]
  }),
  created() {
  },
  mounted() {
    this.$nextTick(function () {
      this.renderMarker(this.point);
    })
  },
  methods: {
    renderMarker(point) {
      let _this = this
      const {firstLayer} = this.$parent;
      let markerUtil = CtMapUtils.markerUtil;
      this.newPoint = [point.x, point.y]
      let marker = new Marker(this.newPoint, {zIndex: this.zIndex == null ? 0 : this.zIndex});
      marker.mpId = point.mpId
      marker.mpType = point.mpType
      this.myMarker = marker;
      let xMarker
      let label
      if (this.symbol) {
        markerUtil.ctSetMarkerSymbol(this.myMarker, this.symbol)
      }
      let slots = this.$slots.infoWindow;
      if (slots) {
        let newInfoWindow = new ui.InfoWindow({
          title: 'default title',
          content: 'default content',
          custom: false,
          autoCloseOn: 'dblclick' // default  mouse_right_click  close .dblclick: double click other area close
        }).addTo(marker);
        if (newInfoWindow) {
          // add showstart showend hide remove
          newInfoWindow.on('add showstart showend hide remove', function (UIComponent) {
            let info_window = UIComponent.target;
            let userMarkerData = point
            switch (UIComponent.type) {
              case 'add':
                _this.$emit('infoWindowAdd', info_window, userMarkerData)
                break
              case 'showstart':
                _this.$emit('infoWindowShowstart', info_window, userMarkerData)
                break
              case 'showend':
                _this.$emit('infoWindowShowend', info_window, userMarkerData)
                break
              case 'hide':
                _this.$emit('infoWindowHide', info_window, userMarkerData)
                break
              case 'remove':
                _this.$emit('infoWindowRemove', info_window, userMarkerData)
                break
              default:
                break
            }
          })
        }
        newInfoWindow.setTitle(null)
        newInfoWindow.setContent(slots[0].elm)
      }
      // 叉号 marker
      if (this.delAble) {
        xMarker = markerUtil.ctCreateMarker(this.newPoint);
        xMarker.setSymbol(this.delSymbol)

        xMarker.addTo(firstLayer)
        // 叉号 监听
        xMarker.on('click', (param) => {
          //  地图 的 标准marker 对象
          let callBackStandardMarker = param.target;
          if (param.type === 'click') {
            // 删除 两个 marker 和一个 label
            _this.myMarker.remove()
            callBackStandardMarker.remove()
            label.remove()
          }
        });
      }
      // label
      if (this.label) {
        let inputLabelText = this.label.text
        if (!this.label.textSymbol) {
          this.label.textSymbol = {
            textSize: 12,
            'textFaceName': 'monospace',
            'textFill': '#fff',
            'textLineSpacing': 1,
            'textHorizontalAlignment': 'right',
            'textDx': 15,
            'markerLineColor': '#b4b3b3',
            'markerFill': '#000',
          }
        }
        label = new maptalks.Label(inputLabelText,
          this.newPoint,
          {
            'draggable': true,
            'textSymbol': this.label.textSymbol
          });
        // label 监听事件
        if (this.label.listens && this.label.listens.length > 0) {
          let s = this.label.listens.toString().replaceAll(',', ' ')
          // 'click dblclick'
          label.on(s, (param) => {
            //  地图 的 标准marker 对象
            let callBackStandardMarker = param.target;
            switch (param.type) {
              case 'dblclick':
                _this.$emit('dblclick', callBackStandardMarker)
                break
              case 'click':
                _this.$emit('click', callBackStandardMarker)
                break
              default:
                break
            }
          });
        }
        label.addTo(firstLayer, false) // center : false
      }
      markerUtil.ctAddToLayer(marker, firstLayer)
      if (this.centerAndZoom && this.newPoint) {
        const {map} = this.$parent;
        if (this.centerAndZoom.center) {
          map.setCenter(this.newPoint)
        }
        if (this.centerAndZoom.zoom) {
          map.setZoom(this.centerAndZoom.zoom)
        }
      }
      //
      this.$emit('markerCompleted', this.myMarker, label, xMarker)
    },
    updateStyle() {
      this.myMarker.updateSymbol(this.symbol);
    },
  },
  computed: {},
  watch: {
    point: {
      immediate: false,
      handler: function (v) {
        this.renderMarker(this.point);
      },
    },
    symbol: {
      handler: function (v) {
        this.myMarker.updateSymbol(this.symbol)
      },
      deep: true
    },
  },
};
</script>

